<template>
  
  <table class="container table" id="table">
    <thead>
      <tr>
        <th class="col-sm-6">主题 </th>
        <th class="col-sm-2">作者 </th>
        <th class="col-sm-2">回复 </th>
        <th class="col-sm-2">帖子信息 </th>
      </tr>
    </thead>

    <tbody>

      <!-- <tr>
        <th class="col-sm-6">标题 </th>
        <th class="col-sm-2">用户 </th>
        <th class="col-sm-2">回复数 </th>
        <th class="col-sm-2">帖子信息</th>
      </tr> -->

      <tr v-for="post in posts" :key="post.id">
        <th class="col-sm-6"> <router-link :to="'/posts/'+post.id">{{post.title}}</router-link> </th>
        <th class="col-sm-2"> 
          <img v-for="avatar in post.avatar" :key="avatar" :src="'/avatar/'+avatar" alt="">
        </th>
        <th class="col-sm-2"> {{post.commentLength}} </th>
        <th class="col-sm-2">{{date(post.timestamp)}}</th>
      </tr>
    </tbody>

  </table>
</template>

<script>
export default {
  data(){
    return{
      posts:{}
    }
  },
  methods:{
    date(timestamp){     
      let date = new Date(timestamp)
      let month = date.getMonth() + 1 + "-"
      let day = date.getDate() + " "
      let hour = date.getHours() + ":"
      let minute = date.getMinutes()
      return month + day + hour + minute
    }
  },

  created:async function(){
    console.log("axios开始请求获取posts数据")
    let response = await this.$http.get("/api/index")
    this.posts = response.data
  }

}
</script>

<style scoped>
 
  table{
    width: 98%;
    
  }
  .table a{
    color: black;
  }
  #table th{
    vertical-align: middle;
  }

  ul{
    list-style: none;
    padding: 0;
  }
  li{
    font-size: 30px;
    border-top: 2px solid #e2e2e2;
  }

  li:last-child{
    border-bottom: 2px solid #e2e2e2;
  }
  
  img{
    width: 25px;
    height: 25px;
    border-radius: 999px;
  }
  @media (min-width: 1200px){
    table{
      width: 90%;
    }
  }
</style>
